<template>
  <customizeDialog
    :visible="dialogVisible"
    @update:visible="dialogVisible = $event"
    ref="dialog"
    title="修改记录"
    :width="'1000px'"
    top="100px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :has-footer="false"
  >
    <div class="history-wrapper" v-loading="loading">
      <div v-if="!listData || listData.length === 0">
        暂无修改记录
      </div>
      <div
        class="item"
        v-for="(item, index) of listData"
        :key="index"
      >
        <div class="item-left">
          <div class="item-left-circle"></div>
          <div class="item-left-line"></div>
        </div>
        <div class="item-right">
          <div class="item-right-title">
            <span class="item-right-title-left">
              <span class="item-right-title-left-time">{{
                item.time
              }}</span>
              <span>
                {{ getItemName(item) }}
              </span>
            </span>
            <span
              class="item-right-title-right"
              v-if="!item.isCheck"
            >
              <i
                class="el-icon-arrow-right"
                v-if="!item.showDetail"
                @click="item.showDetail = true"
              ></i>
              <i
                class="el-icon-arrow-down"
                v-else
                @click="item.showDetail = false"
              ></i>
            </span>
          </div>
          <div
            class="item-right-content"
            v-if="item.showDetail"
          >
            <!-- 修改记录有详情，审核没有 -->
            <div
              class="item-right-content-part"
              v-for="(part, partIndex) of item.moduleVos"
              :key="partIndex"
              v-if="part.moduleName !== '审核信息'"
            >
              <div class="item-right-content-part-type">
                {{ part.moduleName }}
              </div>
              <div class="item-right-content-part-list">
                <div
                  class="item-right-content-part-list-item"
                  v-for="(
                    base, baseIndex
                  ) of part.projectUpdateLogs"
                  :key="baseIndex"
                >
                  <span>
                    【{{
                      base.type === 'add' ? '新增' : '修改'
                    }}】
                  </span>
                  <!-- 普通字段显示 -->
                  <template v-if="base.fieldName">
                    <!-- 年度、月度添加时间 -->
                    <span v-if="base.content">
                      {{ base.content }}，
                    </span>
                    {{ base.fieldName }}：
                    <span
                      v-if="
                        fileLabel.indexOf(
                          base.fieldName
                        ) !== -1
                      "
                      class="item-right-content-part-list-item-spe"
                      >附件上传
                    </span>
                    <span v-else>
                      <span
                        class="item-right-content-part-list-item-spe"
                        >{{ getValue(base, base.oldValue) }}
                      </span>
                      改为
                      <span
                        class="item-right-content-part-list-item-spe"
                        >{{
                          getValue(base, base.newValue)
                        }}</span
                      >
                    </span>
                  </template>
                  <!-- 文件类显示 -->
                  <span v-else>{{ base.content }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </customizeDialog>
</template>
<script>
import { queryOptions } from '@/api/dict'
import { getDictLabel } from '@/utils/dict'
import customizeDialog from '@/components/checkHistory/customizeDialog.vue'
import {
  queryLogList,
  queryJsgsList
} from '@/api/projectMessage'
export default {
  components: {
    customizeDialog
  },
  props: {
    pkid: String
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      listData: [],
      optionLabel: [
        '四大结构调整',
        '细分类型',
        '资金来源',
        '项目分类',
        '项目状态',
        '建设单位',
        '是否发债',
        '审核状态'
      ],
      fileLabel: [
        '用地面积-上传范围（东带）',
        '用地面积-上传范围（2000）',
        '红线面积-上传范围（东带）',
        '红线面积-上传范围（2000）',
        '实施范围面积-上传范围（东带）',
        '实施范围面积-上传范围（2000）'
      ],
      mLabel: ['用地面积', '红线面积', '实施范围面积'],
      wyLabel: [
        '总投资',
        '土地费',
        '工程费',
        '其他费',
        '完成投资',
        '财政出资',
        '其他出资',
        '当前完成投资',
        '财政支付'
      ],
      qmLabel: [
        '电力通道',
        '供水管网',
        '排水管网',
        '燃气管网',
        '通讯管网'
      ],
      wpfmLabel: [
        '具体建设内容 - 景观',
        '具体建设内容 - 房建',
        '道路',
        '景观',
        '房建',
        '综合管廊'
      ],
      glLabel: [
        '具体建设内容 - 道路',
        '具体建设内容 - 综合管廊'
      ],
      options: {
        四大结构调整: [],
        细分类型: [],
        资金来源: [],
        项目分类: [],
        项目状态: [],
        建设单位: [],
        是否发债: [
          {
            dictText: '是',
            dictValue: '1'
          },
          {
            dictText: '否',
            dictValue: '2'
          }
        ],
        审核状态: []
      }
    }
  },
  methods: {
    // 所有选项
    getAllOptions() {
      queryOptions(
        'projectType,projectSdjg,xflx,projectStatus,zjly,bpmStatus'
      ).then((res) => {
        if (res.success) {
          // 项目分类
          this.options['项目分类'] = res.data.filter(
            (i) => i.dictCode === 'projectType'
          )[0].resourceDictItems

          // 四大结构调整
          this.options['四大结构调整'] = res.data.filter(
            (i) => i.dictCode === 'projectSdjg'
          )[0].resourceDictItems

          // 细分类型
          this.options['细分类型'] = res.data.filter(
            (i) => i.dictCode === 'xflx'
          )[0].resourceDictItems

          // 项目状态
          this.options['项目状态'] = res.data.filter(
            (i) => i.dictCode === 'projectStatus'
          )[0].resourceDictItems

          // 资金来源
          this.options['资金来源'] = res.data.filter(
            (i) => i.dictCode === 'zjly'
          )[0].resourceDictItems

          // 审核状态
          this.options['审核状态'] = res.data.filter(
            (i) => i.dictCode === 'bpmStatus'
          )[0].resourceDictItems
        }
      })
    },
    // 建设单位
    getJsgsList() {
      queryJsgsList().then((res) => {
        if (res.success) {
          this.options['建设单位'] = res.data.map(
            (item) => {
              return {
                dictText: item.deptName,
                dictValue: item.pkid
              }
            }
          )
        }
      })
    },
    // 打开弹窗
    showDialog() {
      this.dialogVisible = true
      this.getAllOptions()
      this.getJsgsList()
      this.getListData()
    },
    // 获取记录
    getListData() {
      this.loading = true
      try {
        queryLogList(this.pkid).then((res) => {
          if (res.success) {
            res.data.forEach((element) => {
              element.showDetail = true
              element.isCheck = false
            })
            this.listData = res.data
          } else {
            this.$message.error(res.message)
          }
          this.loading = false
        })
      } catch (error) {
        console.log('error', error)
        this.loading = false
      }
    },
    // 获取具体字段展示：空、枚举项、带单位的数值
    getValue(item, value) {
      let text = ''
      if (
        value === '' ||
        value === null ||
        value === undefined
      ) {
        text = '(空)'
      } else {
        if (
          this.optionLabel.indexOf(item.fieldName) !== -1
        ) {
          // 枚举项
          text = getDictLabel(
            value,
            this.options[item.fieldName]
          )
        } else if (
          this.mLabel.indexOf(item.fieldName) !== -1
        ) {
          text = value + '米'
        } else if (
          this.wyLabel.indexOf(item.fieldName) !== -1
        ) {
          text = value + '万元'
        } else if (
          this.qmLabel.indexOf(item.fieldName) !== -1
        ) {
          text = value + '千米'
        } else if (
          this.wpfmLabel.indexOf(item.fieldName) !== -1
        ) {
          text = value + '万平方米'
        } else if (
          this.glLabel.indexOf(item.fieldName) !== -1
        ) {
          text = value + '公里'
        } else {
          text = value
        }
      }
      return text
    },
    // 获取标题
    getItemName(item) {
      if (item.moduleVos[0].moduleName === '审核信息') {
        item.isCheck = true
        return `${item.moduleVos[0].projectUpdateLogs[0].userName}${item.moduleVos[0].projectUpdateLogs[0].content}`
      } else {
        return `${item.moduleVos[0].projectUpdateLogs[0].userName}修改`
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.history-wrapper {
  width: 100%;
  height: 500px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px;
  overflow-y: auto;
  .item {
    width: 100%;
    height: auto;
    display: flex;
    &-left {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      position: relative;
      &-circle {
        position: absolute;
        width: 20px;
        height: 20px;
        background: #00baff4d;
        border-radius: 50%;
        top: 0;
        &::before {
          position: absolute;
          content: ' ';
          top: 5px;
          left: 5px;
          width: 10px;
          height: 10px;
          background: #00baff;
          border-radius: 50%;
        }
      }
      &-line {
        width: 2px;
        height: 100%;
        background-color: #ebf1f8;
      }
    }
    &-right {
      width: calc(100% - 50px);
      margin-bottom: 10px;
      &-title {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        &-left {
          font-size: 14px;
          font-weight: bold;
          color: #00baff;
          &-time {
            margin-right: 20px;
          }
        }
        &-right {
          cursor: pointer;
        }
      }
      &-content {
        width: 100%;
        height: auto;
        transition: height 1s;
        box-sizing: border-box;
        padding-right: 20px;
        overflow-y: hidden;
        &-part {
          width: 100%;
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          margin-bottom: 5px;
          &:last-child {
            margin-bottom: 0px;
          }
          &-type {
            width: 100px;
            height: 25px;
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background-color: #597182;
            font-size: 14px;
            line-height: 14px;
            margin-right: 20px;
            margin-bottom: 10px;
          }
          &-list {
            flex: 1;
            display: flex;
            flex-direction: column;
            &-item {
              width: 100%;
              font-size: 14px;
              &-spe {
                color: orange;
              }
            }
          }
        }
      }
    }
  }
}
</style>
